<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黄欣</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .dingbudaohanglan{
            width: 100%;
            height: 42px;
            color: #9d9d9d;
            background-color: #222;
        }
        .hezi{
            width: 75%;
            height: 42px;
            margin: 0 auto;
        }
        .dingbudaohanglan .hezi .wenzi:first-child{
            font-size: 18px;
        }
        .dingbudaohanglan .hezi .wenzi{
            display: inline-block;
            padding: 0 10px;
            line-height: 42px;
        }
        .dingbudaohanglan .hezi .wenzi:last-child{
            padding-left: 200px;
        }
        .col-xs-12 .thumbnail{
            height: 333px;
        }
        .guanggao{
            width: 100%;
            height: 500px;
            background: linear-gradient(
            45deg,#020031,#6d3353);
        }
        .biaoti{
            width: 100%;
            height: 300px;
        }
        .jumbotron{
          color: #fff;
          text-align: center;
          background:linear-gradient(45deg,#020031,#6d3353)
        }
        h5,h3,p{
          text-align: center;
        }
      .dht a{
         color: #fff;
         font-size: 15px;
       }
      .col-lg-6 p{
      margin-left: -100px;
       }
    </style>
</head>
<body>
  <!--顶部导航条-->  
  <div class="dingbudaohanglan">
        <div class="hezi">
            <span class="wenzi">Bootstrap中文网
                </span>
            <span class="wenzi">Bootstrap3中文文档
               </span>
            <span class="wenzi"> Bootstrap4中文文档
                </span>
            <span class="wenzi">Sass 教程
               </span>
            <span class="wenzi"> Less 教程
                </span>
            <span class="wenzi">jQuery API
                </span>
            <span class="wenzi">网站实例
                </span>
                <span class="wenzi">关于</span>
                
        </div>
    </div>
    <!--巨幕-->
    <div class="jumbotron">
      <h1>Bootstrap</h1>
      <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Bootstrap3中文文档</a></p>
      <ul class="dht">
        <li>
          <p><a class="btn btn-link btn-sm" href="#" role="button">Bootstrap2中文文档</a></p>
        </li>
      </ul>
      
    </div>
    <!--模块-->
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/1.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3>
                      <h5>Bootstrap 网站实例</h5>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/2.png" alt="...">
                    <div class="caption">
                      <h3>Webpack</h3>
                      <h5>是前端资源模块化管理和打包工具</h5>
                      <p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/3.png" alt="...">
                    <div class="caption">
                      <h3>React</h3>
                      <h5>用于构建用户界面的 JavaScript 框架</h5>
                      <p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/4.png" alt="...">
                    <div class="caption">
                      <h3>TypeScript</h3>
                      <h5>中文手册</h5>
                      <p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/5.png" alt="...">
                    <div class="caption">
                      <h3>Svelte</h3>
                      <h5>中文网</h5>
                      <p>Svelte 是构建 Web 应用程序的一种新方法。Svelte 是一个编译器，它将声明性组件转换成高效的 JavaScript 代码，并像做外科手术一样细粒度地更新 DOM。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/6.png" alt="...">
                    <div class="caption">
                      <h3>Next.js</h3>
                      <h5>中文文档</h5>
                      <p>Next.js 是一个轻量级的 React 服务端渲染应用框架。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/7.png" alt="...">
                    <div class="caption">
                      <h3>Babel</h3>
                      <h5>是一个 JavaScript 编译器。</h5>
                      <p>Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/8.png" alt="...">
                    <div class="caption">
                      <h3>Node.js</h3>
                      <h5>中文文档 / 手册</h5>
                      <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/9.png" alt="...">
                    <div class="caption">
                      <h3>Deno</h3>
                      <h5>中文文档</h5>
                      <p>Deno 是一个简单、现代且安全的 JavaScript 和 TypeScript 运行时，deno 基于 V8 引擎并使用 Rust 编程语言构建。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/10.png" alt="...">
                    <div class="caption">
                      <h3>Yarn</h3>
                      <h5>中文文档</h5>
                      <p>Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/10.png" alt="...">
                    <div class="caption">
                      <h3>Yarn V2</h3>
                      <h5>中文文档</h5>
                      <p>Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。Yarn v2 与 v1 版本有很大的不同，Yarn v2 改进了 CLI 交互、支持 workspace、PnP 等新功能。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/4.png" alt="...">
                    <div class="caption">
                      <h3>NPM</h3>
                      <h5>中文文档</h5>
                      <p>NPM（node package manager）是 Node.js 世界的包管理器。NPM 可以让 JavaScript 开发者在共享代码、复用代码以及更新共享的代码上更加方便。</p>
                     
                    </div>
                  </div>
            </div>
        </div>
    </div>    
     <!--底部导航条-->
     <footer class="footer ">
      <div class="container">
        <div class="row footer-top">
          <div class="col-md-6 col-lg-6">
            <h4>
              <img src="./img/13.png">
            </h4>
      <p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
          </div>
    <div class="col-md-6  col-lg-6">
      <div class="row about">
        <div class="col-sm-3">
          <h4>关于</h4>
          <ul class="list-unstyled">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">广告合作</a></li>
            <li><a href="#">友情链接</a></li>
            <li><a href="#">招聘</a></li>
          </ul>
        </div>
       
        <div class="col-sm-3">
          <h4>联系方式</h4>
          <ul class="list-unstyled">
            <li><a href="#" title="Bootstrap中文网官方微博" target="_blank">新浪微博</a></li>
            <li><a href="#">电子邮件</a></li>
          </ul>
        </div>
        <div class="col-sm-3">
          <h4>旗下网站</h4>
          <ul class="list-unstyled">
            <li><a href="#" target="_blank">BootCDN</a></li>
            <li><a href="#" target="_blank">Packagist中国镜</a></li>
          </ul>
        </div>
        <div class="col-sm-3">
          <h4>特别致谢</h4>
          <ul class="list-unstyled">
            <li><a href="#" target="_blank">猫云</a></li>
            
          </ul>
        </div>
      </div>

    </div>
  </div>
</body>
</html>